<template>
	<view>
		<view class="returnbox" @click="fanhuidata">
			<image src="../../static/fanhui.png"></image>
		</view>

		<view class="mainimage">
			<image mode="aspectFill" :src="datavalue.main_picture">
			</image>
			<view class="mainimageborder"></view>
		</view>
		<view class="contentbox">
			<view class="integralbox">
				<view class="flex ac" style="flex: 1;">
					<view style="font-size: 36rpx;color:#ff4e2e;font-weight: bold;margin-right: 20rpx;">
						{{datavalue.buy_score}}
					</view>
					<view style="font-size: 30rpx;color:#ff4e2e;margin-right: 20rpx;">兑换券</view>
					<!-- <view style="font-size: 28rpx;color: #bcbbc3;">原价:450</view> -->
				</view>
				<view style="color:#afafaf;font-size:28rpx;">库存充足</view>
			</view>
			<view class="titletext">{{datavalue.name}}</view>
			<view style="width: 100%;height: 30rpx;"></view>
			<view v-if="displaya==false" class="address flex ac" @click="chufa">
				<view class="address_title">地址</view>
				<view class="flex ac" style="flex: 1;">
					<view class="addresslist">请选择收货地址</view>
					<image style="width: 50rpx;height: 50rpx;" src="../../static/icon/right1.png"></image>
				</view>
			</view>
			<view v-else class="address flex" @click="chufa">
				<view class="address_title">地址</view>
				<view class="flex ac" style="flex: 1;">
					<view class="addresslist">
						<view class="flex ac">
							<view style="margin-right: 30rpx;">{{defaultadd.name}}</view>
							<view>{{defaultadd.phone}}</view>
						</view>
						<view style="margin-top: 20rpx;">
							{{defaultadd.province}}{{defaultadd.city}}{{defaultadd.county}}{{defaultadd.addr}}
						</view>
					</view>
					<image style="width: 50rpx;height: 50rpx;" src="../../static/icon/right1.png"></image>
				</view>
			</view>
			<view style="width: 100%;height: 30rpx;"></view>
			<view style="margin: 20rpx;">
				<image style="width: 100%;" mode="widthFix"
					src="https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/8a45ac863aee1a540ff557fdafb04d22.jpg?w=750&h=10752">
				</image>
			</view>
			<view style="width: 100%;height: 100rpx;"></view>
			<view class="buttombox">
				<view v-if="chana=='false'" class="buttomlist buttomlist_bg1">兑换券不足</view>
				<view v-if="chana=='true'" class="buttomlist buttomlist_bg2" @click="duihuan">兑换券</view>
			</view>
		</view>

		<!-- 弹窗选择地址 -->
		<view v-if="explainvalie==true" class="explainbox">
			<view class="explainview">
				<view class="tia">注：请核对并确认订单收货地址</view>
				<view class="explainlist">
					<view class="explainlisttitle flex ac">
						<view style="flex: 1;">选择地址</view>
						<u-icon @click="close" class="uiconat" name="close" color="#bcbbc3" size="28"></u-icon>
					</view>
					<view v-if="listdata.length!==0" class="listbox">
						<view v-for="(item,index) in listdata" :key="index" class="listview flex ac"
							@click="choice(item)">
							<view>
								<view class="flex ac" style="color: #686868;">
									<view style="margin-right: 30rpx;">{{item.name}}</view>
									<view>{{item.phone}}</view>
								</view>
								<view style="margin-top: 10rpx;color: #353535;">
									{{item.province}}{{item.city}}{{item.county}}{{item.addr}}
								</view>
							</view>
						</view>
					</view>
					<view v-if="listdata.length==0" class="nodatabox">
						<image style="width: 278rpx;" mode="widthFix" src="../../static/icon/aa/nodata3.png">
						</image>
						<view class="nodatatext">请添加您的收货地址</view>
					</view>
					<view class="explaintiview" @click="add">新增地址</view>
				</view>

			</view>
		</view>

	</view>
</template>

<script>
	import {
		request
	} from "@/static/common.js";
	export default {
		data() {
			return {
				id: '',
				zhid: '',
				chana: '',
				buysre: '',
				integral: '',
				idvalue: '',
				displaya: false,
				explainvalie: false,
				listdata: [],
				defaultadd: [],
				datavalue: [],
			}
		},

		onShow(e) {
			var that = this
			if (uni.getStorageSync("update_quedindel")) {
				that.listaddrdata()
				uni.removeStorageSync('update_quedindel')
			}
		},

		onLoad(e) {
			this.idvalue = e.id
			this.detailsdata() //请求商品详情
			this.listaddrdata() //获取收货地址
		},

		methods: {
			//用户积分兑换商品
			async duihuan(e) {
				let apply = await request(`${getApp().globalData.http}user/exchange_commodity`, {
					// "Content-Type": "application/x-www-form-urlencoded"
					'X-Requested-With': 'XMLHttpRequest',
					'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
				}, "POST", {
					token: getApp().globalData.token,
					commodity_id: this.id,
					addr_id: this.zhid,
				})
				if (apply.data.code == 0) {
					uni.showToast({
						title: `${apply.data.message}`,
						icon: "none",
					})
				} else {
					uni.showToast({
						title: `${apply.data.message}`,
						icon: "none",
					})
				}
			},

			//获取玩家有多少积分
			async userinfodata(e) {
				let apply = await request(`${getApp().globalData.http}user/get_user_info`, {
					// "Content-Type": "application/x-www-form-urlencoded"
					'X-Requested-With': 'XMLHttpRequest',
					'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
				}, "POST", {
					token: getApp().globalData.token
				})
				this.integral = apply.data.data.accumulate
			},

			//请求商品详情
			async detailsdata(e) {
				this.userinfodata() //获取玩家有多少积分

				let apply = await request(`${getApp().globalData.http}commodity/user_get_commodity`, {
					'X-Requested-With': 'XMLHttpRequest',
					'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
				}, "GET", {
					commodity_id: this.idvalue,
				})
				this.id = apply.data.data[0].id
				this.datavalue = apply.data.data[0]
				this.buysre = apply.data.data[0].buy_score
				if (this.integral > this.buysre) {
					this.chana = 'true'
				} else {
					this.chana = 'false'
				}
			},

			fanhuidata(e) {
				uni.navigateBack()
			},

			add(e) {
				this.close()
				uni.navigateTo({
					url: '/pages/fillintheaddress/fillintheaddress?type=' + 1
				})
			},

			chufa(e) {
				this.explainvalie = true
			},

			close(e) {
				this.explainvalie = false
			},

			choice(e) {
				this.explainvalie = false
				this.zhid = e.id
				this.defaultadd.name = e.name
				this.defaultadd.phone = e.phone
				this.defaultadd.province = e.province
				this.defaultadd.city = e.city
				this.defaultadd.county = e.county
				this.defaultadd.addr = e.addr
			},

			//获取收货地址
			async listaddrdata(e) {
				let apply = await request(`${getApp().globalData.http}user/list_addr`, {
					'X-Requested-With': 'XMLHttpRequest',
					'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
				}, "GET", {
					token: getApp().globalData.token,
				})
				this.listdata = apply.data.data
				console.log(apply.data.data.length)
				if (apply.data.data.length == 0) {
					this.displaya = false
				} else {
					this.defaultaddrdata() //获取默认地址
				}
			},

			//获取默认地址
			async defaultaddrdata(e) {
				let apply = await request(`${getApp().globalData.http}user/default_addr`, {
					'X-Requested-With': 'XMLHttpRequest',
					'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
				}, "GET", {
					token: getApp().globalData.token,
				})
				this.defaultadd = apply.data.data
				this.zhid = apply.data.data.id
				if (apply.data.data.length !== 0) {
					this.displaya = true
				}

			},

		}
	}
</script>

<style lang="scss" scoped>
	.returnbox {
		width: 88rpx;
		height: 88rpx;
		position: fixed;
		top: 25rpx;
		left: 20rpx;
		z-index: 999;
	}

	.returnbox image {
		width: 100%;
		height: 100%;
	}

	.mainimage {
		width: 100%;
		height: 780rpx;
		background-color: #ffffff;
		position: relative;
	}

	.mainimage image {
		width: 100%;
		height: 100%;
	}

	.mainimageborder {
		width: 100%;
		height: 30rpx;
		border-radius: 20rpx 20rpx 0 0;
		background-color: #ffffff;
		position: absolute;
		left: 0;
		bottom: -10rpx;
	}

	.contentbox {
		width: 100%;
	}

	.integralbox {
		margin-top: 10rpx;
		display: flex;
		padding: 0 20rpx;
	}

	.titletext {
		font-size: 32rpx;
		font-weight: bold;
		margin-left: 20rpx;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
	}

	.address {
		margin: 0 20rpx;
	}

	.address_title {
		font-size: 30rpx;
		color: #353535;
		font-weight: bold;
	}

	.addresslist {
		color: #909090;
		font-size: 28rpx;
		margin-left: 20rpx;
		flex: 1;
	}

	.buttombox {
		width: 100%;
		height: 150rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.buttomlist {
		width: 70%;
		height: 90rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #ffffff;
		font-weight: bold;
		font-size: 30rpx;
		border-radius: 50rpx;
	}

	.buttomlist_bg1 {
		background-color: #909090;
	}

	.buttomlist_bg2 {
		background: linear-gradient(90deg, #7d6af3, #c077d4);
	}

	// 弹窗选择地址
	.explainbox {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		z-index: 1002;
		background: rgba(0, 0, 0, .5);
		display: flex;
		align-items: flex-end;
	}

	.explainview {
		width: 100%;
		height: 780rpx;
		position: relative;
	}

	.tia {
		font-size: 30rpx;
		text-align: center;
		color: #ffffff;
	}

	.explainlist {
		width: 100%;
		height: 710rpx;
		background-color: #ffffff;
		position: absolute;
		left: 0;
		bottom: 0;
		border-radius: 30rpx 30rpx 0 0;
	}

	.explainlisttitle {
		font-size: 30rpx;
		padding: 20rpx 30rpx;
		background-color: #F6F6F6;
	}

	.listbox {
		height: 510rpx;
		margin: 20rpx 30rpx 0 30rpx;
		overflow-x: hidden;
		overflow-y: auto;
	}

	.listview {
		font-size: 30rpx;
		margin-bottom: 50rpx;
	}

	.nodatabox {
		width: 100%;
		height: 510rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}

	.nodatatext {
		font-size: 28rpx;
		color: #878787;
		margin: 20rpx 0;
	}

	.explaintiview {
		width: 100%;
		height: 110rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #FF5E4C;
		font-size: 32rpx;
		color: #ffffff;
	}
</style>